<template>
	<view class="container">
		<!-- 页面内容区域 -->
		<view class="content-area">
			<!-- 根据当前选中的tab显示不同内容 -->
			<view v-if="currentTab === 0" class="home-page">
				<view class="welcome-section">
					<text class="welcome-title">欢迎使用PC肌训练</text>
					<text class="welcome-subtitle">提高控制力，增强硬度</text>
				</view>
				
				<view class="training-cards">
					<view class="training-card" @tap="goToTraining('初练者硬度提升')">
						<view class="card-content">
							<text class="card-title">初练者硬度提升</text>
							<text class="card-desc">适合刚开始训练的用户</text>
							<text class="card-time">5分钟</text>
						</view>
						<view class="card-action">开始</view>
					</view>
					
					<view class="training-card" @tap="goToTraining('进阶者持久训练')">
						<view class="card-content">
							<text class="card-title">进阶者持久训练</text>
							<text class="card-desc">提高控制力和持久度</text>
							<text class="card-time">10分钟</text>
						</view>
						<view class="card-action">开始</view>
					</view>
					
					<view class="training-card" @tap="goToTraining('专业强化训练')">
						<view class="card-content">
							<text class="card-title">专业强化训练</text>
							<text class="card-desc">全面提升PC肌能力</text>
							<text class="card-time">15分钟</text>
						</view>
						<view class="card-action">开始</view>
					</view>
				</view>
			</view>
			
			<view v-if="currentTab === 1" class="training-page">
				<view class="training-history">
					<text class="section-title">训练记录</text>
					<view class="history-list">
						<view class="history-item" v-for="(item, index) in trainingHistory" :key="index">
							<view class="history-date">{{item.date}}</view>
							<view class="history-info">
								<text class="history-name">{{item.name}}</text>
								<text class="history-duration">{{item.duration}}</text>
							</view>
							<view class="history-count">{{item.count}}次</view>
						</view>
					</view>
				</view>
				
				<view class="training-stats">
					<text class="section-title">训练统计</text>
					<view class="stats-cards">
						<view class="stats-card">
							<text class="stats-value">12</text>
							<text class="stats-label">总训练次数</text>
						</view>
						<view class="stats-card">
							<text class="stats-value">120</text>
							<text class="stats-label">总收缩次数</text>
						</view>
						<view class="stats-card">
							<text class="stats-value">85分钟</text>
							<text class="stats-label">总训练时长</text>
						</view>
					</view>
				</view>
			</view>
			
			<view v-if="currentTab === 2" class="profile-page">
				<view class="user-info">
					<view class="avatar">
						<image src="/static/images/avatar.png" mode="aspectFill"></image>
					</view>
					<view class="user-details">
						<text class="user-name">用户名</text>
						<text class="user-level">训练等级: 初级</text>
					</view>
				</view>
				
				<view class="settings-list">
					<view class="settings-item" @tap="showToast('设置')">
						<text class="settings-label">设置</text>
						<text class="settings-arrow">></text>
					</view>
					<view class="settings-item" @tap="showToast('关于我们')">
						<text class="settings-label">关于我们</text>
						<text class="settings-arrow">></text>
					</view>
					<view class="settings-item" @tap="showToast('帮助中心')">
						<text class="settings-label">帮助中心</text>
						<text class="settings-arrow">></text>
					</view>
					<view class="settings-item" @tap="showToast('意见反馈')">
						<text class="settings-label">意见反馈</text>
						<text class="settings-arrow">></text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				currentTab: 0,
				trainingHistory: [
					{ date: '2023-05-15', name: '初练者硬度提升', duration: '5分钟', count: 30 },
					{ date: '2023-05-14', name: '进阶者持久训练', duration: '10分钟', count: 60 },
					{ date: '2023-05-12', name: '初练者硬度提升', duration: '5分钟', count: 30 }
				]
			}
		},
		methods: {
			switchTab(index) {
				this.currentTab = index;
			},
			goToTraining(name) {
				uni.navigateTo({
					url: '/pages/suogang/index?name=' + encodeURIComponent(name)
				});
			},
			showToast(message) {
				uni.showToast({
					title: message + '功能开发中',
					icon: 'none'
				});
			}
		}
	}
</script>

<style lang="scss">
.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	background-color: #f8f8f8;
	position: relative;
	padding-bottom: 50px; /* 为底部导航栏留出空间 */
}

.content-area {
	flex: 1;
	padding: 15px;
}

/* 首页样式 */
.welcome-section {
	margin-bottom: 20px;
	
	.welcome-title {
		font-size: 22px;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8px;
	}
	
	.welcome-subtitle {
		font-size: 14px;
		color: #666;
	}
}

.training-cards {
	.training-card {
		background: #fff;
		border-radius: 10px;
		padding: 15px;
		margin-bottom: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-shadow: 0 2px 8px rgba(0,0,0,0.05);
		
		.card-content {
			.card-title {
				font-size: 16px;
				font-weight: bold;
				color: #333;
				display: block;
				margin-bottom: 4px;
			}
			
			.card-desc {
				font-size: 13px;
				color: #666;
				display: block;
				margin-bottom: 4px;
			}
			
			.card-time {
				font-size: 12px;
				color: #999;
			}
		}
		
		.card-action {
			background: linear-gradient(135deg, #FFD700, #FFA500);
			color: #fff;
			padding: 8px 18px;
			border-radius: 20px;
			font-size: 14px;
			font-weight: bold;
			box-shadow: 0 2px 5px rgba(255, 215, 0, 0.3);
		}
	}
}

/* 训练页样式 */
.section-title {
	font-size: 16px;
	font-weight: bold;
	color: #333;
	margin-bottom: 12px;
	display: block;
}

.history-list {
	margin-bottom: 25px;
	
	.history-item {
		background: #fff;
		border-radius: 8px;
		padding: 12px;
		margin-bottom: 8px;
		display: flex;
		align-items: center;
		
		.history-date {
			font-size: 12px;
			color: #999;
			width: 70px;
		}
		
		.history-info {
			flex: 1;
			
			.history-name {
				font-size: 14px;
				color: #333;
				display: block;
			}
			
			.history-duration {
				font-size: 12px;
				color: #666;
			}
		}
		
		.history-count {
			font-size: 15px;
			font-weight: bold;
			color: #07c160;
		}
	}
}

.stats-cards {
	display: flex;
	justify-content: space-between;
	
	.stats-card {
		background: #fff;
		border-radius: 8px;
		padding: 12px;
		width: 31%;
		text-align: center;
		
		.stats-value {
			font-size: 18px;
			font-weight: bold;
			color: #07c160;
			display: block;
			margin-bottom: 4px;
		}
		
		.stats-label {
			font-size: 12px;
			color: #666;
		}
	}
}

/* 我的页面样式 */
.user-info {
	background: #fff;
	border-radius: 8px;
	padding: 15px;
	display: flex;
	align-items: center;
	margin-bottom: 15px;
	
	.avatar {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		overflow: hidden;
		margin-right: 12px;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.user-details {
		.user-name {
			font-size: 16px;
			font-weight: bold;
			color: #333;
			display: block;
			margin-bottom: 4px;
		}
		
		.user-level {
			font-size: 13px;
			color: #666;
		}
	}
}

.settings-list {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	
	.settings-item {
		padding: 12px 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1px solid #f0f0f0;
		
		&:last-child {
			border-bottom: none;
		}
		
		.settings-label {
			font-size: 14px;
			color: #333;
		}
		
		.settings-arrow {
			font-size: 14px;
			color: #ccc;
		}
	}
}

/* 需要在App.vue中引入字体图标 */
@font-face {
	font-family: "iconfont";
	src: url('data:application/x-font-woff2;charset=utf-8;base64,..字体base64编码..');
}

.iconfont {
	font-family: "iconfont" !important;
	font-style: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

.icon-home:before {
	content: "\e6b8";
}
.icon-home-filled:before {
	content: "\e6bb";
}
.icon-fitness:before {
	content: "\e612";
}
.icon-fitness-filled:before {
	content: "\e613";
}
.icon-user:before {
	content: "\e7ae";
}
.icon-user-filled:before {
	content: "\e7af";
}
</style>
